document.getElementById('searchBtn').addEventListener('click', function() {
    const searchQuery = document.getElementById('searchInput').value;
    loadStudents(searchQuery);
});

document.getElementById('batchDeleteBtn').addEventListener('click', function() {
    const checkboxes = document.querySelectorAll('#students input[type="checkbox"]:checked');
    const studentIds = [];
    checkboxes.forEach(checkbox => {
        studentIds.push(checkbox.value);
    });
    
    if (studentIds.length > 0) {
        deleteStudents(studentIds);
        loadStudents();
    }
});

// document.getElementById('studentForm').addEventListener('submit', function(event) {
//     event.preventDefault();
//     const name = document.getElementById('name').value;
//     const grade = document.getElementById('grade').value;
//     addStudent(name, grade);
//     this.reset();
// });

document.getElementById('prevPage').addEventListener('click', function() {
    changePage(-1);
});

document.getElementById('nextPage').addEventListener('click', function() {
    changePage(1);
});

let currentPage = 1;
function loadStudents(query = '', page = currentPage) {
    // 假设有一个API /get_students?page=xxx,?page=${page}&query=${encodeURIComponent(query)}
    fetch(`/get_students`)
        .then(response => response.json())
        .then(data => {
            const studentsTableBody = document.getElementById('students');
            studentsTableBody.innerHTML = '';
            data.
            data.students.forEach(student => {
                const row = `<tr>
                    <td><input type="checkbox" class="studentCheckbox" value="${student.id}"></td>
                    <td>${student.id}</td>
                    <td>${student.name}</td>
                    <td>${student.grade}</td>
                    <td>
                        <button class="edit-btn" onclick="editStudent(${student.id})">编辑</button>
                        <button class="delete-btn" onclick="deleteStudent(${student.id})">删除</button>
                    </td>
                </tr>`;
                studentsTableBody.innerHTML += row;
            });
            document.getElementById('currentPage').textContent = page;
        })
        .catch(error => console.error('Error loading students:', error));
}

function deleteStudents(studentIds) {
    // 假设有一个API /delete_students
    fetch('/delete_students', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(studentIds),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            loadStudents();
        }
    })
    .catch(error => console.error('Error deleting students:', error));
}

function addStudent(name, grade) {
    // 假设有一个API /add_student
    fetch('/add_student', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, grade }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            loadStudents();
        }
    })
    .catch(error => console.error('Error adding student:', error));
}

function changePage(increment) {
    currentPage += increment;
    loadStudents('', currentPage);
}

// 初始加载学生数据
loadStudents();